/**
* 我的页面
*/
<template>
	<view class="">
		<!-- 顶部个人信息 -->
		<view class="bg-white">
			<view class="flex padding" @click="toEdit">
				<view class="padding-lr-xs">
					<image class="cu-avatar lg round" style="border-radius: 50%;" :src="user.avatarUrl"></image>
				</view>
				<view class="padding-xs text-xl text-black">
					<view>Hello，{{user.username}}</view>
					<view class="jifen">积分{{points}}</view>
					<!-- <view class="text-gray font-11">{{}}</view> -->
					<!-- <view class="cu-tag round line-green sm">积分22.2g ></view> -->
				</view>
			</view>
		</view>
		<!-- 常用功能 -->
		<view class="cu-bar margin-lr-xs margin-top-sm grid col-4 no-border bg-white radius-lg-top">
			<view class="action">
				<text class="text-xl text-black">我的学习</text>
			</view>
		</view>
		<view class="cu-list grid col-4 no-border text-black margin-lr-xs padding-bottom radius-lg-bottom">
			<view class="cu-item" v-for="(item,index) in iconList" :key="index" :bindtap="item.bindtap">
				<view :class="['iconfont '+item.icon,'text-'+item.color,'text-shadow']" style="font-size: 56rpx;">
					<view class="cu-tag badge" v-if="item.badge!=0">
						<block v-if="item.badge!=1">{{item.badge>99?"99+":item.badge}}</block>
					</view>
				</view>
				<text>{{item.name}}</text>
			</view>
		</view>

		<!-- 其他功能 -->
		<view class="cu-bar margin-lr-xs margin-top grid col-4 no-border bg-white radius-lg-top">
			<view class="action">
				<text class="text-xl">其他功能</text>
			</view>
		</view>
		<view class="cu-list grid col-4 no-border text-black margin-lr-sm padding-bottom radius-lg-bottom">
			<view class="cu-item" v-for="(item,index) in iconOtherList" :key="index" :bindtap="item.bindtap">
				<view :class="['iconfont '+item.icon,'text-'+item.color,'text-shadow']" style="font-size: 56rpx;">
					<view class="cu-tag badge" v-if="item.badge!=0">
						<block v-if="item.badge!=1">{{item.badge>99?"99+":item.badge}}</block>
					</view>
				</view>
				<text>{{item.name}}</text>
			</view>
		</view>
		<up-button text="退出登录" @click="Logout()"></up-button>

	</view>
</template>

<script>
	import {
		useUserStore
	} from '@/store/modules/user.js';
	import {
		toast
	} from 'luoyu-uni-utils'
	export default {
		data() {
			return {
				points: '0',
				iconList: [{
					icon: 'icon-tubiao-17',
					color: 'blue',
					badge: 0,
					name: '学习记录'
				}, {
					icon: 'icon-tubiao-15',
					color: 'red',
					badge: 0,
					name: '错题本',
					bindtap: "bindZan"
				}, {
					icon: 'icon-tubiao-17',
					color: 'purple',
					badge: 11,
					name: '收藏词汇书',
					bindtap: "showResource"
				}],
				iconOtherList: [{
					icon: 'icon-kefu',
					color: 'blue',
					badge: 0,
					name: '在线客服'
				}, {
					icon: 'icon-yijianfankui',
					color: 'blue',
					badge: 0,
					name: '举报投诉',
					bindtap: "bindZan"
				}, {
					icon: 'icon-xiazai',
					color: 'blue',
					badge: 0,
					name: '我的下载',
					bindtap: "showResource"
				}, {
					icon: 'icon-ren',
					color: 'blue',
					badge: 0,
					name: '关于我们',
					bindtap: "bindCollect"
				}, {
					icon: 'icon-huishouzhan_jiaodian',
					color: 'blue',
					badge: 0,
					name: '清理缓存',
					bindtap: "bindZan"
				}]
			}
		},
		setup() {
			const userStore = useUserStore();
			return {
				userStore
			}
		},
		computed: {
			user() {
				return this.userStore.user
			}
		},
		onShow() {
			this.points = this.userStore.userPoints
			this.userStore.getUserInfo()
		},
		methods: {
			Logout() {
				const userStore = useUserStore();
				userStore.Logout().then(() => {
					toast("退出成功！")
					//reLaunch：关闭所有页面，打开到应用内的某个页面
					//用户点击确定跳转登录
					uni.reLaunch({
						url: "/pages_auth/pages/login/index"
					})
				}).catch(() =>{
					toast("退出成功！")
					uni.reLaunch({
						url: "/pages_auth/pages/login/index"
					})
				})
			},
			toEdit() {
				uni.navigateTo({
					url: "/pages_mine/pages/info/index"
				})
			}

		}
	}
</script>

<style>

</style>